<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择商品</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
  <link rel="stylesheet" href="/static/css/style.css">
  <script src="/static/layui/jquery.min.js"></script>
  <script src="/static/layui/layui.js"></script>
  <script src="/static/js/xyl.js"></script>
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-body">
          <fieldset class="layui-elem-field">
            <legend>条件搜索</legend>
            <div class="layui-field-box">
              <form class="layui-form layui-form-pane" action="{:url('/store/goods/option')}" method="GET">
                <div class="layui-form-item">
                  <input type="hidden" name="type" value="{$type}">
                  <div class="layui-inline">
                    <label class="layui-form-label">分类</label>
                      <div class="layui-input-inline">
                        <select name="cid" lay-search>
                          <option value="">请选择分类</option>
                          {foreach $options as $vo}
                          <option value="{$vo.id}">{$vo.name}</option>
                          {/foreach}
                        </select>
                      </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">商品名称</label>
                    <div class="layui-input-inline">
                      <input type="text" name="keyword"  placeholder="请输入商品名称" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <div class="layui-input-inline">
                      <button  class="layui-btn" lay-submit lay-filter="search">搜索</button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </fieldset>
        <form class="layui-form">
            <table class="layui-table">
                <tr>
                    <th>
                      {notempty name='type'}
                          <input type="checkbox" lay-skin="primary" title="全选" id="parent" lay-filter="parent">
                      {else /}
                         ID
                      {/notempty}
                    </th>
                    <th>图片</th>
                    <th>商品名称</th>
                    <th>原价</th>
                    <th>现价</th>
                    <th>总库存</th>
                    <th>总销量</th>
                    <th>创建时间</th>
                </tr>
                {foreach $list as $vo}
                <tr>
                    <input type="hidden" class="attr" value="{$vo.goods_attr}" />
                    <input type="hidden" class="skus" value="{$vo.items|json_encode}" />
                    <td>
                        {notempty name='type'}
                          <input type="checkbox" lay-filter="son"  class="son" lay-skin="primary" value="{$vo.id}" title="{$vo.id}">
                        {else /}
                          <input type="radio" name="id" value="{$vo.id}" title="{$vo.id}">
                        {/notempty}
                    </td>
                    <td>
                        <img src="{$vo.main_image}" class="layui-view-img main-image">
                    </td>
                    <td class="goods-name">{$vo.goods_name}</td>
                    <td>{$vo.market_price}</td>
                    <td>{$vo.sell_price}</td>
                    <td>{$vo.stock}</td>
                    <td>{$vo.total_sale}</td>
                    <td>{$vo.create_time}</td>
                </tr>
                {/foreach}
            </table>
            {$list|raw}
        </form>
  </div>
</div>
<script>
    layui.use('form',function(){
        var form = layui.form;
        form.on('checkbox(parent)',function(data){
            selected(data.elem.checked);
        })

        function selected(checked){
          $('.son').each(function(){
              $(this).prop('checked',checked);
          });
          form.render('checkbox');
        }

        form.on('checkbox(son)',function(data){
            sonSelected();
        })

        function sonSelected(){
          let son = $('.son');
          let count = 0;
          son.each(function(){
             if($(this).prop('checked')){
                count++;
             }
          });

          $('#parent').prop('checked',son.length == count);
          form.render('checkbox');
        }

    });

</script>
</body>
</html>